<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React基础</title>
    <style>
        .title {
            background: orange;
        }
    </style>
</head>
<body>
<!--准备好的容器-->
<div id="test">

</div>
</body>
<!--引入babel，用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--核心库引入顺序，必须先是核心库然后在引入dom库-->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<!--用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!--此处的type必须是Babel不能是JavaScript-->
<script type="text/babel">
    const data1 = ['Angular', 'Vue', 'React']
    //1.创建虚拟Dom
    const dom = (
        <div>
            <h1>前端JS框架</h1>
            <ul>
                {
                    data1.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )

    //2.渲染虚拟Dom
    ReactDOM.render(dom, document.getElementById('test'))

    /*
        一定注意区分：Js语句(代码)与Js表达式
            1.一个表达式会产生一个值，可以放在任何一个需要值的地方
                下面这些是表达式
                    (a).a       //变量调用表达式
                    (b).a+b     //变量运算表达式
                    (c).demo(1) //函数调用表达式
                    (d).arr.map()   //数组调用方法
                    (e).function test(){} //方法
            2.语句(代码)
                下面这些都是语句(代码)
                    (a).if(){}
                    (b).for(){}
                    (c).switch(){case:xx}


    */

</script>
</html>